/*Grid related css*/
.ColumnImage {
  width: 90%;
  border-radius: 1vw;
  border: solid #242753;
}
.yellowBlock {
  background-color: #ffcc00;
  color: #242753;
  border: solid #242753 5px;
  padding-bottom: 2vw;
  border-radius: 1vw;
}

/*Generic grids*/
.twoColumnGrid {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 49% 49%;
  text-align: center;
}
.twoColumnGrid1to2 {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 32% 65%;
  text-align: center;
  align-items: center;
}
.twoColumnGrid1to2Left {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 32% 65%;
  text-align: left;
  align-items: left;
  vertical-align: top;
}
.twoColumnGrid2to1 {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 65% 32%;
  align-items: center;
}
.twoColumnGrid1to3 {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 24% 74%;
}
.twoColumnGrid3to1 {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 74% 24%;
}
.twoColumnGrid3to2 {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 59% 39%;
  text-align: center;
}

.imbalancedTwoColumnGrid {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 24% 74%;
  text-align: center;
  align-items: center;
}
.threeColumnGrid {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 32% 32% 32%;
  text-align: center;
}
.threeColumnGridNotCentered {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 32% 32% 32%;
  text-align: left;
}
.fourColumnGrid
{
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 24% 24% 24% 24%;
  text-align: center;
}

.fourColumnGridLeftAlign {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 24% 24% 24% 24%;
}
.fiveColumnGrid {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 19% 19% 19% 19% 19%;
  text-align: center;
}
.sixColumnGrid {
  display: grid;
  width: 100%;
  margin-left: 2.5%;
  grid-gap: 1%;
  grid-template-columns: 15% 15% 15% 15% 15% 15%;
  text-align: center;
}
.sixColumnGridWelshMenuBar {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 15% 15% 15% 20% 15% 15%;
  text-align: center;
}
.eightColumnGrid {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  padding: 10px;
  grid-template-columns: 11% 11% 11% 11% 11% 11% 11% 11%;
  align-items: center;
  text-align: center;
}
.tenColumnGrid {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  padding: 10px;
  grid-template-columns: 9% 9% 9% 9% 9% 9% 9% 9% 9% 9%;
  align-items: center;
  text-align: center;
}
.textColumn {
  text-align: left;
}

/*Special basic grids*/
.solarSystemGrid {
  display: grid;
  width: 100%;
  grid-gap: 0;
  grid-template-columns: 9% 9% 9% 9% 9% 9% 9% 9% 9% 9% 9%;
  align-items: center;
  text-align: center;
}

/*More specific grids*/
.bottomBar {
  grid-area: bottomBar;
}
.item1 {
  grid-area: area1;
}
.item2 {
  grid-area: area2;
}
.item3 {
  grid-area: area3;
}
.item4 {
  grid-area: area4;
}
.item5 {
  grid-area: area5;
}
.item5Center {
  grid-area: area5;
  text-align: center;
}
.item6 {
  grid-area: area6;
}
.item6Center {
  grid-area: area6;
  text-align: center;
}
.item7 {
  grid-area: area7;
}
.item7Center {
  grid-area: area7;
  text-align: center;
}
.item8 {
  grid-area: area8;
  width: 100%;
}
.item9 {
  grid-area: area9;
}
.item10 {
  grid-area: area10;
}
.item11 {
  grid-area: area11;
}
.item12 {
  grid-area: area12;
}
.item13 {
  grid-area: area13;
}
.item14 {
  grid-area: area14;
}
.itemA {
  grid-area: areaA;
}
.itemACenter {
  grid-area: areaA;
  text-align: center;
}
.itemB {
  grid-area: areaB;
}
.itemC {
  grid-area: areaC;
}
.itemD {
  grid-area: areaD;
}
.itemDCenter {
  grid-area: areaD;
  text-align: center;
}
.itemE {
  grid-area: areaE;
}
.title1 {
  grid-area:title1;
}
.title2 {
  grid-area:title2;
}
.title3 {
  grid-area:title3;
}
.title4 {
  grid-area:title4;
}
.title5 {
  grid-area:title5;
}
.tileArea {
  grid-area:tiles;
}
.tileHeader {
  grid-area: tileHeader;
}
.ageMenuGrid {
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 19% 19% 19% 19% 19%;
  text-align: center;
  background-color: White;
  margin-bottom: 2vw;
}
.a-levelTileGrid, .gcseTileGrid, .ks3TileGrid, .primaryTileGrid, .allAgesTileGrid{
  display: grid;
  width: 100%;
  grid-gap: 1%;
  grid-template-columns: 24% 24% 24% 24%;
  margin-bottom: 2vw;
}
.eventsGrid {
  display: grid;
  width: 100%;
  grid-template-areas:
  'tileHeader tileHeader tileHeader tileHeader'
  'tiles tiles tiles tiles'
  'bottomBar bottomBar bottomBar bottomBar';
  grid-gap: 1%;
  grid-template-columns: 24% 24% 24% 24%;
}
.eventsDescriptionGrid {
  display: grid;
  width: 100%;
  grid-template-areas:
  'title1 title1 title1 title1'
  'area1 area2 area2 area2'
  'title2 title2 title2 title2'
  'area3 area4 area4 area4'
  'title3 title3 title3 title3'
  'area5 area6 area6 area6'
  'title4 title4 title4 title4'
  'area7 area8 area8 area8'
  'title5 title5 title5 title5'
  'area9 area10 area10 area10';
  grid-gap: 1%;
  grid-template-columns: 24% 24% 24% 24%;
  margin-bottom: 5vw;
}
.facultyHomeGrid {
  display: grid;
  width: 100%;
  grid-template-areas:
  'area1 area1 area1 area1'
  'area2 area2 area2 area2'
  'area4 area6 area6 area6'
  'area4 area5 area5 area5'
  'area4 area8 area8 area8'
  'area4 area14 area14 area14'
  'area4 area11 area12 area13'
  'area4 area10 area10 area10';
  grid-gap: 1%;
  grid-template-columns: 24% 24% 24% 24%;
}
.homePageGrid {
  display: grid;
  width: 100%;
  grid-template-areas:
  'area1 area1 area1'
  'area2 area2 area2'
  'area3 area3 area3'
  'area4 area5 area5'
  'area4 area5 area5'
  'area6 area6 area6'
  'area7 area7 area7';
  grid-gap: 1%;
  grid-template-columns: 24% 50% 24%;
}
.homePageGridV2 {
  display: grid;
  width: 100%;
  grid-template-areas:
  'area1 area2 area2 area2'
  'area1 area3 area3 area3'
  'area1 area4 area4 area4'
  'area1 area5 area5 area5';
  grid-gap: 1%;
  grid-template-columns: 24% 24% 24% 24%;
}
.mainBodyGrid {
    display: grid;
    width: 100%;
    grid-template-areas:
    'areaA areaA'
    'areaB areaC'
    'areaD areaD';
    grid-gap: 1%;
    grid-template-columns: 66% 33%;
}
.menuBarGrid {
  display: grid;
  width: 100%;
  grid-template-areas:
  'areaA areaB areaC areaD areaE';
  grid-template-columns: 20% 20% 20% 20% 20%;
  text-align: center;
  background-color: LightGray;
}
.adventCalendar {
  margin-bottom: 4vw;
}


.workshopGrid {
  display: grid;
  width: 100%;
  grid-template-areas:
  'tileHeader tileHeader tileHeader tileHeader'
  'tiles tiles tiles tiles';
  grid-gap: 1%;
  grid-template-columns: 24% 24% 24% 24%;
}